<template>
  <el-card id="index_id">
    <template>
      <el-carousel indicator-position="outside">
        <el-carousel-item
          v-for="item in $store.state.IndexStore.img_list"
          :key="item.id"
        >
          <!-- <el-carousel-item v-for="item in $store.state.img_list" :key="item.id"> -->
          -->
          <img class="img_item" :src="'http://127.0.0.1:3766' + item.img" />
        </el-carousel-item>
      </el-carousel>
    </template>
  </el-card>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({ img_list: (state) => state.IndexStore.img_list }),
    ...mapGetters("IndexStore", ["BannerLength"]),
  },
  methods: {
    ...mapActions("IndexStore", ["BannerActions"]),
    ...mapMutations("IndexStore", ["BannerMutation"]),
  },
  created() {
    this.BannerActions();
  },
};
</script>

<style>
#index_id {
  height: 80vh;
}
#index_id .img_item {
  width: 100%;
  height: 100%;
}
</style>